<!DOCTYPE html>
<html lang="zh-CN">





<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/myblog/img/apple-touch-icon.png">
  <link rel="icon" type="image/png" href="/myblog/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="TakCode Blog">
  <meta name="author" content="谢芃">
  <meta name="keywords" content="">
  <title>常用代码片段 - TakCode</title>

  <link  rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.12.1/css/all.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/mdbootstrap/4.13.0/css/mdb.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/github-markdown-css/3.0.1/github-markdown.min.css" />

<link rel="stylesheet" href="//at.alicdn.com/t/font_1067060_qzomjdt8bmp.css">



  <link  rel="stylesheet" href="/myblog/lib/prettify/tomorrow-night-eighties.min.css" />

<link  rel="stylesheet" href="/myblog/css/main.css" />


  <link defer rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />


<!-- 自定义样式保持在最底部 -->


<meta name="generator" content="Hexo 4.2.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/myblog/">&nbsp;<strong>TakCode</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/">首页</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/archives/">归档</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/categories/">分类</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/tags/">标签</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/about/">关于</a>
          </li>
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="view intro-2" id="background" parallax=true
         style="background: url('/myblog/img/default.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask rgba-black-light flex-center">
          <div class="container text-center white-text fadeInUp">
            <span class="h2" id="subtitle">
              
            </span>

            
              
                <p class="mt-3 post-meta">
                  <i class="fas fa-calendar-alt" aria-hidden="true"></i>
                  星期四, 八月 27日 2020, 6:23 晚上
                </p>
              

              <p class="mt-1">
                
                  
                  <span class="post-meta">
                    <i class="far fa-chart-bar"></i>
                    1.9k 字
                  </span>
                

                
                  
                  <span class="post-meta">
                      <i class="far fa-clock"></i>
                      9 分钟
                  </span>
                

                
              </p>
            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid">
  <div class="row">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-md">
      <div class="container nopadding-md" id="board-ctn">
        <div class="py-5 z-depth-3" id="board">
          <div class="post-content mx-auto" id="post">
            
            <div class="markdown-body">
              <h3 id="图片转base64"><a href="#图片转base64" class="headerlink" title="图片转base64"></a>图片转base64</h3><pre><code class="js">
    urlTobase64(url, e) {
      uni.request({
        url: url,
        method: &#39;GET&#39;,
        responseType: &#39;arraybuffer&#39;,
        success: (res) =&gt; {
          let base64 = uni.arrayBufferToBase64(res.data) //把arraybuffer转成base64
          base64 = &#39;data:image/jpeg;base64,&#39; + base64 //不加上这串字符，在页面无法显示
          e === 0 ? (this.userInfo.humanStr = base64) : &#39;&#39;
          e === 1 ? (this.userInfo.emblemStr = base64) : &#39;&#39;
          e === 2 ? (this.userInfo.bareheadedStr = base64) : &#39;&#39;
        },
      })
    },
</code></pre>
<h3 id="base64转file"><a href="#base64转file" class="headerlink" title="base64转file"></a>base64转file</h3><pre><code>
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(&#39;,&#39;),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    },</code></pre><h3 id="css-文本超出换行"><a href="#css-文本超出换行" class="headerlink" title="css 文本超出换行"></a>css 文本超出换行</h3><pre><code>        overflow: hidden; // 超出的文本隐藏
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
         word-break: break-all; // 字母数字不换行</code></pre><h3 id="css一行右对齐-超过一行左对齐"><a href="#css一行右对齐-超过一行左对齐" class="headerlink" title="css一行右对齐 超过一行左对齐"></a>css一行右对齐 超过一行左对齐</h3><pre><code class="scss">.item-status-box {
  position: relative;
  text-align: right;
  .item-status {
    display: inline-block;
    text-align: left;
  }</code></pre>
<h3 id="css-两端对齐"><a href="#css-两端对齐" class="headerlink" title="css 两端对齐"></a>css 两端对齐</h3><pre><code>// html
&lt;div&gt;姓名&lt;/div&gt;
&lt;div&gt;手机号码&lt;/div&gt;
&lt;div&gt;账号&lt;/div&gt;
&lt;div&gt;密码&lt;/div&gt;

// css
div {
    margin: 10px 0; 
    width: 100px;
    border: 1px solid red;
    text-align: justify;
    text-align-last:justify
}
div:after{
    content: &#39;&#39;;
    display: inline-block;
    width: 100%;
}</code></pre><h3 id="CSS左右滑动"><a href="#CSS左右滑动" class="headerlink" title="CSS左右滑动"></a>CSS左右滑动</h3><pre><code>
    display: flex;
    justify-content: space-around;
    width: 710rpx; //指定可滑动区域宽度
    margin: 40rpx 20rpx 50rpx;
    overflow: hidden; //超出隐藏
    white-space: nowrap; //超出不换行
    overflow-x: auto; //出现水平滚动条
    &amp;::-webkit-scrollbar {
      display: none;
    }</code></pre><h3 id="nth-child数量的判断"><a href="#nth-child数量的判断" class="headerlink" title="nth-child数量的判断"></a>nth-child数量的判断</h3><pre><code class="scss">想要实现田字布局，但当只3个item时，就会存在边框上的问题。
先实现左下边框显示，偶数项只显示下边框。

.item {
        @include flexCenter;
        flex-direction: column;
        width: 50%;
        height: 376rpx;
        border: 2px solid #efeff4;
        border-left: none;
        border-top: none;
        &amp;:nth-last-child(2) {
            border-bottom: none;
        }
        &amp;:nth-child(2n) {
            border: none;
            border-bottom: 2px solid #efeff4;
        }
        &amp;:nth-last-child(1) {
            border-bottom: none;
        }
    }</code></pre>
<h3 id="判断当前浏览器环境"><a href="#判断当前浏览器环境" class="headerlink" title="判断当前浏览器环境"></a>判断当前浏览器环境</h3><pre><code>/**
 * @see 判断当前浏览器环境
 */
export function Device(key) {
  const { userAgent: UA } = navigator;
  const UA_L = UA.toLowerCase();
  const judgeDevice = {
    trident: UA.includes(&quot;Trident&quot;), //IE内核
    presto: UA.includes(&quot;Presto&quot;), //opera内核
    iPad: UA.includes(&quot;iPad&quot;), //是否iPad
    iPhone: UA.includes(&quot;iPhone&quot;), //是否为iPhone或者QQHD浏览器
    webKit: UA.includes(&quot;AppleWebKit&quot;), //苹果、谷歌内核
    webApp: UA.indexOf(&quot;Safari&quot;) === -1, //是否web应用程序，没有头部与底部
    mobile: !!UA.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
    ios: !!UA.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
    android: UA.includes(&quot;Android&quot;) || UA.includes(&quot;Linux&quot;), //android终端或uc浏览器
    gecko: UA.includes(&quot;Gecko&quot;) &amp;&amp; UA.indexOf(&quot;KHTML&quot;) === -1, //火狐内核
    wechat: UA_L.toLowerCase().match(/MicroMessenger/i) == &quot;micromessenger&quot; // 微信
  };
  return judgeDevice[key]
}</code></pre><h3 id="判断一个元素是否在数组中"><a href="#判断一个元素是否在数组中" class="headerlink" title="判断一个元素是否在数组中"></a>判断一个元素是否在数组中</h3><pre><code>indexOf()方法返回给定元素能找在数组中找到的第一个索引值，否则返回-1。
var a=[&quot;1&quot;, &quot;3&quot;, &quot;2&quot;, &quot;3&quot;, &quot;0&quot;];
      console.log(a.indexOf (&#39;3&#39;));//1
      console.log(a.indexOf (5,&#39;0&#39;));//-1
      console.log(a.indexOf (&#39;0&#39;));//4
      console.log(a.indexOf (&#39;0&#39;,-5));//4
      console.log(a.indexOf (&#39;3&#39;,-1));//-1
      console.log(a.indexOf (&#39;3&#39;,-3));//3
      console.log(a.indexOf (&#39;1&#39;,5));//-1
      console.log(a.indexOf (3));//-1
      console.log(a);//[&quot;1&quot;, &quot;3&quot;, &quot;2&quot;, &quot;3&quot;, &quot;0&quot;]
includes()方法返回给定元素是否在数组中,无则返回 false
let arr = [1,2,3];
arr.includes(1) // true
arr.includes(5) //false</code></pre><h3 id="Vue中监听窗口关闭事件"><a href="#Vue中监听窗口关闭事件" class="headerlink" title="Vue中监听窗口关闭事件"></a>Vue中监听窗口关闭事件</h3><pre><code class="js">mounted() {
  // 判断是否是微信浏览器
  let ua = window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i)
  ua = ua !== null ? ua[0] : null
  if (ua === &#39;micromessenger&#39;) {
    window.addEventListener(&#39;pagehide&#39;, (e) =&gt; this.beforeunloadHandler(e))
    window.addEventListener(&#39;unload&#39;, (e) =&gt; this.unloadHandler(e))
  } else {
    window.addEventListener(&#39;beforeunload&#39;, (e) =&gt;this.beforeunloadHandler(e))
    window.addEventListener(&#39;unload&#39;, (e) =&gt; this.unloadHandler(e))
  }
},
  destroyed() {
    window.removeEventListener(&#39;beforeunload&#39;, e =&gt; this.beforeunloadHandler(e))
    window.removeEventListener(&#39;pagehide&#39;, e =&gt; this.beforeunloadHandler(e))
    window.removeEventListener(&#39;unload&#39;, e =&gt; this.unloadHandler(e))
  },
    methods: {
      beforeunloadHandler(){
        this._beforeUnload_time=new Date().getTime();
      },
        unloadHandler(e){
          this._gap_time=new Date().getTime()-this._beforeUnload_time;
          debugger
          //判断是窗口关闭还是刷新
          if(this._gap_time&lt;=5){
            //如果是登录状态，关闭窗口前，移除用户
            if(!this.showLoginButton){
              $.ajax({
                url: &#39;/pictureweb/user/remove&#39;,
                type: &#39;get&#39;,
                async:false, //或false,是否异步

              })
            }
          }
        },
    }</code></pre>
<h3 id="vue判断页面是否正在滚动"><a href="#vue判断页面是否正在滚动" class="headerlink" title="vue判断页面是否正在滚动"></a>vue判断页面是否正在滚动</h3><pre><code class="js">export default {
  data() {
    return {
      oldScrollTop: 0, //记录上一次滚动结束后的滚动距离
      scrollTop: 0 // 记录当前的滚动距离
    }
  },
  watch: {
    scrollTop(newValue, oldValue) {
      setTimeout(() =&gt; {
        if(newValue == window.scrollY) { //延时执行后当newValue等于window.scrollY，代表滚动结束
          console.log(&#39;滚动结束&#39;);
          this.oldScrollTop = newValue; //每次滚动结束后都要给oldScrollTop赋值
        };
      }, 20); //必须使用延时器，否则每次newValue和window.scrollY都相等，无法判断，20ms刚好大于watch的侦听周期，故延时20ms
      if(this.oldScrollTop == oldValue) { //每次滚动开始时oldScrollTop与oldValue相等
        console.log(&#39;滚动开始&#39;);
      }
    }
  },
  methods: {
    handleScroll() {
      window.addEventListener(&#39;scroll&#39;, () =&gt; {
        this.scrollTop = window.scrollY;
      })
    }
  },
  mounted() {
    this.handleScroll();
  },
  beforeDestroy() {
    window.removeEventListener(&#39;scroll&#39;); //离开当前组件别忘记移除事件监听哦
  }
}
</code></pre>
<h3 id="Array常用操作"><a href="#Array常用操作" class="headerlink" title="Array常用操作"></a>Array常用操作</h3><h5 id="includes"><a href="#includes" class="headerlink" title="includes( )"></a>includes( )</h5><p> <code>includes()</code> 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。 </p>
<pre><code>const pets = [&#39;cat&#39;, &#39;dog&#39;, &#39;bat&#39;];

console.log(pets.includes(&#39;cat&#39;));
// expected output: true

console.log(pets.includes(&#39;at&#39;));
// expected output: false</code></pre><h5 id="数组数据添加修改删除"><a href="#数组数据添加修改删除" class="headerlink" title="数组数据添加修改删除"></a>数组数据添加修改删除</h5><pre><code class="js">// 添加 
arr.push(&#39;e&#39;) // 末尾添加
arr.unshift(&#39;a&#39;) // 头部插入
// 下标修改
arr[1]=&#39;c&#39;
//删除起始下标为1，长度为1的一个值(len设置1，如果为0，则数组不变) 
var arr = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;]; 
arr.splice(1,1); 
console.log(arr); 
//[&#39;a&#39;,&#39;c&#39;,&#39;d&#39;]; 

</code></pre>
<h3 id="Object常用操作"><a href="#Object常用操作" class="headerlink" title="Object常用操作"></a>Object常用操作</h3><h5 id="Object-assign"><a href="#Object-assign" class="headerlink" title="Object.assign( )"></a>Object.assign( )</h5><p> <code>Object.assign()</code> 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。 </p>
<pre><code>const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }</code></pre><h5 id="判断对象是否有某个属性"><a href="#判断对象是否有某个属性" class="headerlink" title="判断对象是否有某个属性"></a>判断对象是否有某个属性</h5><pre><code class="js">// 创建对象
let test = {name : &#39;lei&#39;}
// 使用 . 或 []
// 获取对象的自身的属性
test.name            //&quot;lei&quot;
test[&quot;name&quot;]         //&quot;lei&quot;

// 获取不存在的属性
test.age             //undefined

// 获取原型上的属性
test[&quot;toString&quot;]     //toString() { [native code] }

// 新增一个值为undefined的属性
test.un = undefined

test.un              //undefined    不能用在属性值存在，但可能为 undefined的场景

// 使用in 运算符 如果指定的属性在指定的对象或其原型链中，则in 运算符返回true
&#39;name&#39; in test        //true
&#39;un&#39; in test             //true
&#39;toString&#39; in test    //true
&#39;age&#39; in test           //false

// 使用 hasOwnProperty() 可以
test.hasOwnProperty(&#39;name&#39;)        //true   自身属性
test.hasOwnProperty(&#39;age&#39;)           //false  不存在
test.hasOwnProperty(&#39;toString&#39;)    //false  原型链上属性</code></pre>
<h3 id="Strin常用操作"><a href="#Strin常用操作" class="headerlink" title="Strin常用操作"></a>Strin常用操作</h3><h5 id="首字母大写"><a href="#首字母大写" class="headerlink" title="首字母大写"></a>首字母大写</h5><pre><code>let str = &#39;image&#39;
str.charAt(0).toUpperCase()+str.slice(1)</code></pre><h3 id="js-for循环-递归-return-失败"><a href="#js-for循环-递归-return-失败" class="headerlink" title="js for循环 递归 return 失败"></a>js for循环 递归 return 失败</h3><pre><code class="js">// 错误案例
const idFind = function(list, id) {
  if (!list || !id) return
  console.log(&#39;-=-=-=-=-=&#39;, list, id)
  for (const i of list) {
    if (i.id === id) {
      console.log(&#39;相等啦&#39;, i)
      return i
    } else if (i.elements &amp;&amp; i.elements.length) {
      return idFind(i.elements, id)
    }
  }
}


// 正确案例
const idFind = function(list, id) {
  console.log(&#39;idFind&#39;)
  if (!list || !id) return
  let result = {}
  list.forEach(item =&gt; {
    // console.log(&#39;forEach&#39;, item)
    const loop = data =&gt; {
      if (data.id === id) {
        result = data
      }
      const child = data.elements
      if (child) {
        child.forEach(i =&gt; {
          loop(i)
        })
      }
    }
    loop(item)
  })
  return result
}</code></pre>
<h3 id="判断是否为数组"><a href="#判断是否为数组" class="headerlink" title="判断是否为数组"></a>判断是否为数组</h3><pre><code>Object.prototype.toString.call(obj) == &#39;[object Array]&#39;</code></pre><h3 id="判断是否为对象"><a href="#判断是否为对象" class="headerlink" title="判断是否为对象"></a>判断是否为对象</h3><pre><code>Object.prototype.toString.call(obj) == &#39;[object Object]&#39;</code></pre><h3 id="获取URL参数"><a href="#获取URL参数" class="headerlink" title="获取URL参数"></a>获取URL参数</h3><pre><code class="js">let queryString = &#39;?name=123&#39; // ?name=123
let params  = new URLSearchParams(queryString)
let result = params.get(&#39;name&#39;) // 123</code></pre>
<h3 id="setTimeout用法"><a href="#setTimeout用法" class="headerlink" title="setTimeout用法"></a>setTimeout用法</h3><pre><code class="json">let videolist = document.querySelectorAll(&quot;.agd-img-video__play&quot;);
function timer(i) {
  setTimeout(() =&gt; { 
    videolist[i].click()
    document.querySelector(&quot;.agd-icon-close-circle-o&quot;).click()
  }, i*2000);
};
for (let i = 0; i &lt; videolist.length; i++) {
  timer(i);
};</code></pre>
<h3 id="用JS进行Base64编码、解码"><a href="#用JS进行Base64编码、解码" class="headerlink" title="用JS进行Base64编码、解码"></a>用JS进行Base64编码、解码</h3><pre><code class="dart">window.btoa(&#39;china is so nb&#39;) // 编码
&quot;Y2hpbmEgaXMgc28gbmI=&quot;
window.atob(&quot;Y2hpbmEgaXMgc28gbmI=&quot;) // 解码
&quot;china is so nb&quot;</code></pre>
<h3 id="Element-ui踩坑"><a href="#Element-ui踩坑" class="headerlink" title="Element-ui踩坑"></a>Element-ui踩坑</h3><h4 id="keyup-enter-”submit”无效"><a href="#keyup-enter-”submit”无效" class="headerlink" title="@keyup.enter=”submit”无效"></a>@keyup.enter=”submit”无效</h4><p>改为@keyup.enter.native=”submit”  即可</p>

            </div>
            <hr>
            <div>
              <p>
                
                
              </p>
              
                <p class="note note-warning">本博客所有文章除特别声明外，均采用 <a href="https://zh.wikipedia.org/wiki/Wikipedia:CC_BY-SA_3.0%E5%8D%8F%E8%AE%AE%E6%96%87%E6%9C%AC" target="_blank" rel="nofollow noopener noopener">CC BY-SA 3.0协议</a> 。转载请注明出处！</p>
              
              
                <div class="post-prevnext row">
                  <div class="post-prev col-6">
                    
                    
                      <a href="/myblog/2020/10/05/JavaScript%E9%AB%98%E7%A8%8B4%E7%AC%94%E8%AE%B0/">
                        <i class="fa fa-chevron-left"></i>
                        <span class="hidden-mobile">JavaScript高程4笔记</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </div>
                  <div class="post-next col-6">
                    
                    
                      <a href="/myblog/2020/08/14/%E4%BD%BF%E7%94%A8AnyProxy%E8%BF%9B%E8%A1%8C%E6%8A%93%E5%8C%85/">
                        <span class="hidden-mobile">使用AnyProxy进行抓包</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="fa fa-chevron-right"></i>
                      </a>
                    
                  </div>
                </div>
              
            </div>

              
          </div>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc-start"></div>
<div id="toc">
  <p class="h5"><i class="far fa-list-alt"></i>&nbsp;目录</p>
  <div id="tocbot"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    
  </main>

  
    <a class="z-depth-1" id="scroll-top-button" href="#" role="button">
      <i class="fa fa-chevron-up scroll-top-arrow" aria-hidden="true"></i>
    </a>
  

  
    <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
  

  

  

  <footer class="mt-5">
  <div class="text-center py-3">
    <div>
      <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><b>Hexo</b></a>
      <i class="iconfont icon-love"></i>
      <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"> <b>Fluid</b></a>
    </div>
    

    

    
  </div>
</footer>

<!-- SCRIPTS -->
<script  src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" ></script>
<script  src="https://cdn.staticfile.org/popper.js/1.16.1/umd/popper.min.js" ></script>
<script  src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script  src="https://cdn.staticfile.org/mdbootstrap/4.13.0/js/mdb.min.js" ></script>
<script  src="/myblog/js/main.js" ></script>


  <script  src="/myblog/js/lazyload.js" ></script>



  
  <script  src="https://cdn.staticfile.org/tocbot/4.10.0/tocbot.min.js" ></script>
  <script>
    $(document).ready(function () {
      var navHeight = $('#navbar').height();
      var toc = $('#toc');
      var boardCtn = $('#board-ctn');
      var boardTop = boardCtn.offset().top;
      var tocLimMax = 2 * boardTop + boardCtn.height();

      $(window).scroll(function () {
        var tocLimMin = $('#toc-start').offset().top - navHeight;
        var scroH = document.body.scrollTop + document.documentElement.scrollTop;

        if (tocLimMin <= scroH && scroH <= tocLimMax) {
          toc.css({
            'display': 'block',
            'position': 'fixed',
            'top': navHeight,
          });
        } else if (scroH <= tocLimMin) {
          toc.css({
            'position': '',
            'top': '',
          });
        } else if (scroH > tocLimMax) {
          toc.css('display', 'none');
        }
      });
      tocbot.init({
        tocSelector: '#tocbot',
        contentSelector: '.post-content',
        headingSelector: 'h1,h2,h3,h4,h5,h6',
        linkClass: 'tocbot-link',
        activeLinkClass: 'tocbot-active-link',
        listClass: 'tocbot-list',
        isCollapsedClass: 'tocbot-is-collapsed',
        collapsibleClass: 'tocbot-is-collapsible',
        scrollSmooth: true,
        headingsOffset: -boardTop
      });
      if ($('.toc-list-item').length > 0) {
        $('#toc > p').css('visibility', 'visible');
      }
      var offset = boardCtn.css('margin-right')
      $('#toc-ctn').css({
        'right': offset
      })
    });
  </script>





  <script defer src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js" ></script>
  <script  src="/myblog/js/clipboard-use.js" ></script>








<!-- Plugins -->



  <script  src="https://cdn.staticfile.org/prettify/188.0.0/prettify.min.js" ></script>
  <script>
    $(document).ready(function () {
      $('pre').addClass('prettyprint  linenums');
      prettyPrint();
    })
  </script>



  <script  src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js" ></script>
  <script>
    var typed = new Typed('#subtitle', {
      strings: [
        '  ',
        "常用代码片段&nbsp;",
      ],
      cursorChar: "_",
      typeSpeed: 70,
      loop: false,
    });
    typed.stop();
    $(document).ready(function () {
      $(".typed-cursor").addClass("h2");
      typed.start();
    });
  </script>



  <script  src="https://cdn.staticfile.org/anchor-js/4.2.2/anchor.min.js" ></script>
  <script>
    anchors.options = {
      placement: "right",
      visible: "hover",
      
    };
    var el = "h1,h2,h3,h4,h5,h6".split(",");
    var res = [];
    for (item of el) {
      res.push(".markdown-body > " + item)
    }
    anchors.add(res.join(", "))
  </script>



  <script  src="/myblog/js/local-search.js" ></script>
  <script>
    var path = "/myblog/local-search.xml";
    var inputArea = document.querySelector("#local-search-input");
    inputArea.onclick = function () {
      getSearchFile(path);
      this.onclick = null
    }
  </script>



  <script defer src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js" ></script>
  <script>
    $("#post img:not(.no-zoom img, img[no-zoom])").each(
      function () {
        var element = document.createElement("a");
        $(element).attr("data-fancybox", "images");
        $(element).attr("href", $(this).attr("src"));
        $(this).wrap(element);
      }
    );
  </script>












</body>
</html>
